<template>
  <div class="evaluate">
    <div class="evaluate_title">
      <span @click="goTo"><van-icon name="arrow-left" /></span> 发表评价
    </div>
    <!-- 美食图 -->
    <div class="evaluate_img"><img :src="img" /></div>
    <!-- 评分 -->
    <div class="evaluate_score">
      <van-rate color="#ff690c" gutter="20" v-model="value" />
    </div>
    <!-- 评价 -->
    <div class="evaluate_comment">
      <textarea v-model="val" placeholder="请真实评价哦"></textarea>
    </div>
    <div class="issue"><button @click="issue">发布</button></div>
  </div>
</template>

<script>
import { postFunc } from "@/http/request.js";
import { Toast } from "vant";

export default {
  data() {
    return {
      value: 0,
      img: "",
      val: "",
    };
  },
  methods: {
    goTo() {
      this.$router.go(-1);
    },
    issue() {
      let cate_id = this.$route.query.cate_id;
      let date = new Date();
      let year = date.getFullYear(); //年
      let month = date.getMonth() + 1; //月
      let dates = date.getDate(); //日
      let time = `${year}-${month}-${dates}`;

      let image = this.avatar;
      var reg2 = /upload(\S*)/;
      image = image.match(reg2)[1];

      this.uploading(this.userName, image, cate_id, this.value, this.val, time);
    },
    uploading(userName, img, cate_id, num, content, time) {
      postFunc("/cate/publishs", {
        userName,
        img,
        cate_id,
        num,
        content,
        time,
      }).then((data) => {
        if (data.code == 200) {
          Toast("发布成功！");
          this.goTo();
        } else {
          Toast("发布失败！");
        }
      });
    },
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar;
    },
    userName() {
      return this.$store.state.user.userName;
    },
  },
  mounted() {
    // console.log(this.$route.query.img);
    this.img = this.$route.query.img;
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
.evaluate {
  .evaluate_title {
    position: relative;
    text-align: center;
    height: 15vw;
    line-height: 15vw;
    font-size: 5.5vw;
    background-color: #eee;
    span {
      position: absolute;
      left: 2vw;
      top: 0;
    }
  }
  .evaluate_img {
    width: 25vw;
    height: 25vw;
    margin: 5vw auto;

    img {
      width: 100%;
      height: 100%;
      border-radius: 5vw;
    }
  }
  .evaluate_score {
    width: 50vw;
    margin: 0 auto;
  }
  .evaluate_comment {
    padding: $p;
    margin-top: 5vw;
    textarea {
      resize: none;
      padding: 2vw 4vw;
      width: 100%;
      height: 70vw;
      border-radius: 5vw;
    }
  }
  .issue {
    width: 100%;
    margin-top: 5vw;
    padding: $p;
    button {
      width: 100%;
      height: 12vw;
      background-color: $bgc;
      border: 0;
      border-radius: 10vw;
      color: #fff;
    }
  }
}
</style>